<script lang="ts" setup>
import { ref } from 'vue';
import { useLocale } from '@/locale/locale';

const { t } = useLocale();

const active = defineModel<string>({ default: 'checkout' });

const items = ref([
  {
    key: 'checkout',
    icon: '/static/icon_order_hotel.png',
    label: t('OrderListHomestay')
  },
  {
    key: 'dining',
    icon: '/static/icon_order_dining.png',
    label: t('OrderListRestaurant')
  },
  {
    key: 'car',
    icon: '/static/icon_order_airport.png',
    label: t('OrderListTransfer')
  },
  {
    key: 'spa',
    icon: '/static/icon_order_massage.png',
    label: t('Spa')
  }
]);
</script>

<template>
  <view class="flex items-center py-4 px-3">
    <view
      v-for="item in items"
      :key="item.key"
      :class="active == item.key ? 'is-active' : ''"
      class="order-type__item"
      @click="active = item.key"
    >
      <image
        :src="active == item.key ? '/static/icon_order_list_tab_active.png' : item.icon"
        class="w-3 h-3 mr-1"
      />
      <text class="text-xxs font-medium nowrap">{{ item.label }}</text>
    </view>
  </view>
</template>

<style lang="scss">
.order-type__item {
  align-items: center;
  background-color: #fff;
  border: 2rpx solid #adaeb0;
  border-radius: 298rpx;
  color: #3d3d3d;
  display: flex;
  justify-content: center;
  padding: 13rpx 22rpx;

  &.is-active {
    background-color: #e4edea;
    border-color: #269c74;
    color: #269c74;
  }

  & + & {
    margin-left: 20rpx;
  }
}
</style>
